<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        @import "../../css/bass.css";
        @import "//at.alicdn.com/t/font_2628658_avkowx9zqn.css";

        .nav-bar {
            min-width: 1205px;
            height: 140px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 999;
            padding-top: 30px;
        }

        .nav-bar .content {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .nav-bar .content .top {
            flex: 1;
            display: flex;
        }

        .nav-bar .content .top > .left {
            flex: 1;
        }

        .nav-bar .content .top > .left h1 {
            width: 193px;
            height: 65px;
        }

        .nav-bar .content .top > .left h1 a {
            width: 100%;
            height: 100%;
            display: block;
            font-size: 0;
            background-image: url(../../components/image/img.png);
            background-size: contain;
            background-repeat: no-repeat;
        }

        .nav-bar .content .top > .center {
            flex: 2;
            display: flex;
            justify-content: flex-end;
        }

        .nav-bar .content .top > .center .search-bar {
            width: 400px;
            height: 40px;
            border: 1px solid #999;
            border-radius: 20px;
            box-sizing: border-box;
            display: flex;
        }

        .nav-bar .content .top > .center .search-bar .category {
            background-color: deeppink;
            flex: 1;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            overflow: hidden;
        }

        .nav-bar .content .top > .center .search-bar .category label select {
            width: 100%;
            height: 100%;
            border: none;
            padding-left: 10px;
            font-size: 15px;
            color: #666;
            outline: none;
        }

        .nav-bar .content .top > .center .search-bar .keyword {
            background-color: pink;
            flex: 4;
        }

        .nav-bar .content .top > .center .search-bar .keyword input {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: none;
            outline: none;
            padding-left: 10px;
        }

        .nav-bar .content .top > .center .search-bar .search-btn {
            background-color: cyan;
            flex: 1;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            overflow: hidden;
        }

        .nav-bar .content .top > .center .search-bar .search-btn input {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            background-color: green;
            color: #fff;
            font-size: 14px;
        }

        .nav-bar .content .bottom {
            height: 40px;
            display: flex;
        }

        .nav-bar .content .bottom .left {
            flex: 1;
        }

        .nav-bar .content .bottom .left .menu-bar {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .nav-bar .content .bottom .left .menu-bar li {
            padding: 0 20px;
            line-height: 30px;
            font-size: 18px;
            position: relative;
        }

        .nav-bar .content .bottom .left .menu-bar li a {
            color: #333;
            text-decoration: none;
        }

        .nav-bar .content .bottom .left .menu-bar li.active a,
        .nav-bar .content .bottom .left .menu-bar li:hover a {
            color: red;
        }

        .nav-bar .content .bottom .left .menu-bar li.active::after,
        .nav-bar .content .bottom .left .menu-bar li:hover::after {
            content: "";
            display: block;
            width: 50%;
            height: 5px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .nav-bar .content .bottom .right {
            flex: 1;
        }

        .nav-bar .content .bottom .right ul {
            height: 100%;
            display: flex;
            justify-content: flex-end;
        }

        .nav-bar .content .bottom .right ul li {
            padding: 0 20px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
            position: relative;
        }

        .nav-bar .content .bottom .right ul li:hover .detail-pane {
            display: block;
        }

        .nav-bar .content .bottom .right ul li .detail-pane {
            width: 240px;
            height: 220px;
            background-color: #fff;
            position: absolute;
            padding-top: 10px;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            box-shadow: -1px 2px 5px 5px #ccc;
            display: none;
            text-align: center;
        }

        .nav-bar .content .bottom .right ul li .detail-pane .title {
            line-height: 26px;
            font-size: 14px;
            color: #333;
        }

        .nav-bar .content .bottom .right ul li .detail-pane .intro {
            line-height: 24px;
            font-size: 12px;
            color: #666;
        }

        .nav-bar .content .bottom .right ul li .detail-pane .qr_code {
            margin-top: 10px;
            width: 145px;
            height: 145px;
        }

        .nav-bar .content .bottom .right ul li .detail-pane::after {
            content: "";
            border: 10px solid transparent;
            border-bottom-color: #fff;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>


</head>
<body>

<div id="root"></div>

<script src="../lib/react.development.js"></script>
<script src="../lib/react-dom.development.js"></script>
<script src="../lib/babel.min.js"></script>

<script type="text/babel">

    function Card() {
        return (
            <div className="nav-bar">
                <div className="content bx">
                    <div className="top">
                        <div className="left">
                            <h1>
                                <a href="#">
                                    联通学院
                                </a>
                            </h1>
                        </div>
                        <div className="center">
                            <form action="">
                                <div className="search-bar">
                                    <div className="category">
                                        <label>
                                            <select name="category">
                                                <option value="all">全部</option>
                                                <option value="teacher">动态</option>
                                                <option value="course">讲师</option>
                                                <option value="article">课程</option>
                                            </select>
                                        </label>

                                    </div>
                                    <div className="keyword">
                                        <label>
                                            <input name="kw" type="text" placeholder="请输入搜索的关键字"/>
                                        </label>
                                    </div>
                                    <div className="search-btn">
                                        <input type="submit" value="&#xe604; 搜索" className="iconfont"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div className="bottom">
                        <div className="left">
                            <ul className="menu-bar">
                                <li className="active"><a href="#">首页</a></li>
                                <li><a href="#">信息中心</a></li>
                                <li><a href="#">教师中心</a></li>
                                <li><a href="#">课程专栏</a></li>
                            </ul>
                        </div>
                        <div className="right">
                            <ul>
                                <li className="iconfont icon-xiaochengxu">
                                    微信小程序
                                    <div className="detail-pane">
                                        <p className="title">微信小程序</p>
                                        <p className="intro">- 小程序, 真是好呀! -</p>
                                        <img className="qr_code" src="../../components/image/ewm_lk.jpg" alt=""/>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    let v_dom = <div>
        <Card/>
    </div>

    ReactDOM.render(v_dom, document.getElementById("root"))

</script>


</body>
</html>